@import 'https://unpkg.com/open-props@1.5.0/open-props.min.css';
@import 'https://unpkg.com/open-props/normalize.min.css';
:root {
  font-family: var(--font-mono);
}
:root body {
  background: var(--stone-12);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#app {
  border: var(--border-size-2) solid var(--blue-10);
  resize: both;
  padding: 10px;
  overflow: auto;
}
#app #hd {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
#app #hd > div {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--gray-1);
  font-size: var(--font-size-5);
}
#app #hd > div:nth-of-type(1) {
  background: var(--teal-7);
}
#app #hd > div:nth-of-type(2) {
  background: var(--orange-5);
}
#app #hd > div:nth-of-type(3) {
  background: var(--violet-5);
}
#app #hd > div:nth-of-type(4) {
  background: var(--cyan-7);
}
#app #xj {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
#app #xj > div {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--gray-1);
  font-size: var(--font-size-5);
}
#app #xj > div:nth-of-type(1) {
  background: var(--teal-7);
}
#app #xj > div:nth-of-type(2) {
  background: var(--orange-5);
}
#app #xj > div:nth-of-type(3) {
  background: var(--violet-5);
}
#app #xj > div:nth-of-type(4) {
  background: var(--cyan-7);
}